<template>
  <div>
    <basic-page-vxe
      :columns="basicData.columns"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      list-api="queryMyNotification"
      @handleDetail="showDialog"
    />
    <el-dialog :close-on-click-modal="false" :title="detail.title" :visible.sync="showLook">
      <div>发布者：{{ detail.publisher }} 发布时间：<span>{{ detail.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span></div>
      <div v-html="detail.content" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showLook = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryNotificationType } from '@/api/home'
export default {
  name: '',
  components: {
  },
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '标题', field: 'title', fixed: 'left', minWidth: '200' }, type: 'copy', className: 'swpuLink' },
          { config: { title: '类型', field: 'typeCn', minWidth: '200' }},
          { config: { title: '优先级', field: 'priorityCn', width: '80' }},
          { config: { title: '发布者', field: 'publisher', width: '80' }},
          { config: { title: '日期', field: 'createTime', width: '180' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '90', fixed: 'right' },
            type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='success' v-permission="'details'" onClick={() => this.showDialog(scope.row)}><i class='el-icon-view'></i> 详情</el-button>
                </div>
              )
            }
          }
        ],
        searchForm: [
          { type: 'Input', label: '标题', prop: 'title', width: '180px' },
          { type: 'Select', label: '类型', prop: 'type', options: [], width: '180px' }
        ]
      },
      showLook: false,
      typ: [],
      detail: {}

    }
  },
  computed: {},
  created() {
    this.getType()
  },
  mounted() {
  },
  methods: {
    // 业务逻辑
    getType() {
      this.listLoading = true
      queryNotificationType().then(response => {
        this.basicData.searchForm[1].options = response.data
        this.listLoading = false
      })
    },
    showDialog(row) {
      this.showLook = true
      this.detail = row
    }
  }
}
</script>

<style scoped>
  .warning{
    text-align: center;
    font-size: 20px;
  }
  .el-icon-info{
    font-size: 30px;
    color: orange;
  }
</style>
